<template>
	<view class="container">
		<!-- 顶部 -->
		<!-- 头部区域 -->
		<view class="outside-box">
			<div class="header-box">
				<div class="top-box">
					<div class="left-box">
						<img class="avatar-box" :src="doctorInfo.image?doctorInfo.image: baseURL + '/static/error.png'"
							alt="" @error="imageError">
						<div class="text-box">
							<div class="name-box">{{doctorInfo.doctorName}}</div>
							<div class='lv-box'>{{doctorInfo.departmentName}}</div>
						</div>
					</div>
					<view>
						<u-button v-if="doctorInfo.isFollow==='N'" size="mini" color="#2E75E8"
							@click='followClick(true)'>关注</u-button>
						<u-button v-else size="mini" color="#2E75E8" @click='followClick(false)'
							:plain="true">取消关注</u-button>
					</view>
					<!-- 	<div class="info-btn" @click='followClick(true)'>
						关注
					</div> -->
					<!-- 	<div v-else class="info-btn-no" @click='followClick(false)'>
						取消关注
					</div> -->
				</div>
				<div class="feature-box">
					<div class="item-f">
						<div class="top-f">{{doctorInfo.diagnosisNum?doctorInfo.diagnosisNum:'0'}}</div>
						<div class="bottom-f">诊疗人数</div>
					</div>
					<div class="item-f">
						<div class="top-f">{{doctorInfo.esteemNum?doctorInfo.esteemNum:'0'}}</div>
						<div class="bottom-f">好评人数</div>
					</div>
					<div class="item-f">
						<div class="top-f">{{doctorInfo.attentionNum?doctorInfo.attentionNum:'0'}}</div>
						<div class="bottom-f">关注人数</div>
					</div>
					<!-- <div class="item-f">
						<div class="top-f">50</div>
						<div class="bottom-f">点击量</div>
					</div> -->
				</div>
				<div class="intro-content">
					<text>简介：</text>
					{{doctorInfo.introduce?doctorInfo.introduce:'暂无'}}
				</div>

			</div>

		</view>
		<!-- 预约挂号 -->
		<view class="outside-box">
			<view class="uni-margin-wrap">
				<view style="padding: 10rpx;font-size: 32rpx;text-align: center;font-weight: 600;">预约</view>
				<view>
					<u-tabs :list="tabList" @click="tabClick"></u-tabs>
				</view>
				<swiper class="swiper" circular :indicator-dots="true" style="padding: 10rpx;height: 400rpx;">
					<swiper-item v-for='(arr,index) in listArr' :key='index'>
						<view class="swiper-item uni-bg-red">
							<view style="z-index: 999;font-size: 24rpx;">
								<uni-table border stripe emptyText="暂无更多数据">
									<!-- 表头行 -->
									<uni-tr>
										<uni-th width="10rpx" align="center"></uni-th>
										<uni-th v-for='obj in arr' :key='obj.id' width="80rpx" align="center">
											<view>{{obj.week}}</view>
											<view>{{obj.date}}</view>
										</uni-th>
									</uni-tr>
									<!-- 表格数据行 -->
									<uni-tr>
										<uni-td>上<br>午</uni-td>
										<uni-td v-for='obj in arr' :key='obj.id'>
											<!-- 	<text v-if='obj.antemeridian.all'
												@click="dateClick">{{obj.antemeridian.s}}/{{obj.antemeridian.all}}</text>
 -->
											<view class="td-box" v-if='obj.antemeridian.all'
												:style="{color:isShowTime(obj,1)?'':'#999'}"
												@click="dateClick(obj.antemeridian,isShowTime(obj,1))">
												<text v-if='obj.antemeridian.s===obj.antemeridian.all'
													:class="obj.antemeridian.s===obj.antemeridian.all?'red-box':''">
													已满</text>
												<text v-else>
													{{obj.antemeridian.s}}/{{obj.antemeridian.all}}</text>
											</view>
										</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>下<br>午</uni-td>
										<uni-td v-for='obj in arr' :key='obj.id'>
											<view class="td-box" v-if='obj.afternoon.all'
												:style="{color:isShowTime(obj,2)?'':'#999'}"
												@click="dateClick(obj.afternoon,isShowTime(obj,2))">
												<text v-if='obj.afternoon.s===obj.afternoon.all'
													:class="obj.afternoon.s===obj.afternoon.all?'red-box':''">
													已满</text>
												<text v-else>
													{{obj.afternoon.s}}/{{obj.afternoon.all}}</text>
											</view>
										</uni-td>
									</uni-tr>
								</uni-table>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 发友点评 -->
		<view class="outside-box">
			<view class="message-box">
				<view style="padding: 20rpx 40rpx;font-size: 32rpx;text-align: left;font-weight: 600;">发友评论</view>
				<!-- <evaluateComplate :doctorId='doctorId' :storeId="storeId"></evaluateComplate> -->
				<view class="message-list">
					<view class="message-item" v-for='item in reviewList.content' :key='item.id'>
						<view class="top-box">
							<view class="heander-left">
								<img :src="item.weAvatar" alt="">
								<view class="title-flex">
									<view>{{item.weUserName}}</view>
									<view>{{item.publicTime}}</view>
								</view>
							</view>
							<view>
								<view @click="isLikeClick('Y',item.id)" v-if="item.isLike === 'N'">
									<u-icon size="36rpx" name="heart"></u-icon>
								</view>
								<view v-else>
									<u-icon @click="isLikeClick('N',item.id)" color="#e45656" name="heart-fill"
										size="36rpx"></u-icon>
								</view>
							</view>
						</view>
						<view class="center-box">
							<view style="margin-bottom: 20rpx;">{{item.content}}</view>
							<view v-if='item.imageList && item.imageList.length>0'>
								<u-album :urls="item.imageList"></u-album>
							</view>
						</view>
						<view class="bottom-box">
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 弹出层 -->
		<u-popup :show="show" @close="close" @open="open">
			<view style="padding: 0 40rpx;padding-bottom: 60rpx;height:80vh;overflow: scroll;">
				<view class="h-title">请选择预约时间段</view>
				<view style="font-size: 24rpx;color: #999;">{{appointSchedule.appointDate}}
					{{classesMethod(appointSchedule.classesType)}}
					{{weekMethod(appointSchedule.appointDate)}}
				</view>
				<view style="font-size: 28rpx;display: flex;justify-content: space-between;margin-bottom: 30rpx;">
					<view>诊查费：0.0元 </view>
					<view>
						<u-button text="预约" @click="branchCourtMethod" size='mini' color='#ff7615'></u-button>
					</view>

				</view>
				<!-- <view style="display: flex;justify-content: center;">
					<view><u-tabs :list="list" @click="tabsClick" :current='current'></u-tabs></view>
				</view> -->
				<!-- v-if='current===0' -->
				<view class="box-content">
					<view @click="timeActiveClick(item.scheduleId)"
						:class="item.scheduleId===timeActive?'box-content-active':''" v-for='item in timeList'
						:key="item.scheduleId">
						{{item.appointTime}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
	</view>
</template>
<script>
import {
  scheduleDoctorInfo,
  appointScheduleList,
  doctorInfo,
  followDoctor,
  unFollowDoctor,
  evaluateList,
  makeAppointment,
  evaluateArea,
  evaluateLike,
  evaluateUnlike,
} from "@/api/axios/MakeAnAppointmentCenter.js";
import evaluateComplate from "./evaluateComplate/index.vue";
export default {
  data() {
    return {
      MAAList: [],
      listArr: [],
      show: false,
      tabList: [
        {
          name: "面诊",
        },
        {
          name: "理疗",
        },
      ],
      list: [
        {
          name: "上午",
        },
        {
          name: "下午",
        },
      ],
      current: 0,
      doctorId: "",
      storeId: "",
      appointSchedule: {},
      timeList: [],
      doctorInfo: {},
      baseURL: this.staticURL,
      openId: "",
      reviewList: [],
      timeActive: "",
    };
  },
  components: {
    evaluateComplate,
  },
  mounted() {},
  async onLoad(data) {
    this.clue({
      action: "5",
      eventType: "2",
    });
    let _this = this;
    this.doctorId = data.doctorId;
    this.storeId = data.storeId;
    this.openId = uni.getStorageSync("openId");
    doctorInfo({
      params: {
        openId: this.openId,
        doctorId: data.doctorId,
      },
    }).then((res) => {
      _this.doctorInfo = res;
    });
    this.init(1);
    evaluateArea({
      params: {
        openId: this.openId,
        doctorId: data.doctorId,
      },
    }).then((res) => {
      _this.reviewList = res ? res : [];
    });
  },
  methods: {
    isShowTime(obj, i) {
      console.log(obj);
      let timeHour = new Date().getHours();
      let date = new Date(),
        year = date.getFullYear(), //获取完整的年份(4位)
        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
        strDate = date.getDate(); // 获取当前日(1-31)
      if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
      if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0
      if (i == 1) {
        if (obj.date == `${month}-${strDate}` && timeHour > 8) {
          return false;
        } else {
          return true;
        }
      } else {
        if (obj.date == `${month}-${strDate}` && timeHour > 12) {
          return false;
        } else {
          return true;
        }
      }
    },
    classesMethod(key) {
      if (key == 1) {
        return "上午";
      } else if (key == 2) {
        return "下午";
      } else {
        return "晚上";
      }
    },
    weekMethod(time) {
      let week = new Date(time).getDay();
      let weekStr = "";
      switch (week) {
        case 0:
          weekStr = "星期日";
          break;
        case 1:
          weekStr = "星期一";
          break;
        case 2:
          weekStr = "星期二";
          break;
        case 3:
          weekStr = "星期三";
          break;
        case 4:
          weekStr = "星期四";
          break;
        case 5:
          weekStr = "星期五";
          break;
        case 6:
          weekStr = "星期六";
          break;
      }
      return weekStr;
    },
    isLikeClick(isFlag, id) {
      let _this = this;
      if (isFlag === "Y") {
        evaluateLike({
          openId: this.openId,
          id: id,
        }).then((res) => {
          _this.reviewList.content.forEach((item) => {
            if (item.id === id) {
              item.isLike = "Y";
              this.clue({
                action: "4",
                eventType: "1",
              });
            }
          });
        });
      } else {
        evaluateUnlike({
          openId: this.openId,
          id: id,
        }).then((res) => {
          console.log(_this.reviewList);
          _this.reviewList.content.forEach((item) => {
            if (item.id === id) {
              item.isLike = "N";
            }
          });
        });
      }
    },
    branchCourtMethod() {
      let customerId = uni.getStorageSync("customerId");
      let _this = this;
      makeAppointment({
        customerId: customerId,
        scheduleId: this.timeActive,
      }).then((res) => {
        this.show = false;
        console.log(res);
        if (res.code !== 500) {
          uni.showToast({
            icon: "none",
            title: "预约成功",
            duration: 2000,
            success() {
              _this.clue({
                action: "6",
                eventType: "1",
              });
              setTimeout(function () {
                uni.redirectTo({
                  url: "/pages/Main/index",
                });
              }, 2000);
            },
          });
        }
      });
    },
    timeActiveClick(id) {
      this.timeActive = id;
    },
    imageError() {
      this.doctorInfo.image = this.baseURL + "/static/error.png";
    },
    followClick(flag) {
      let _this = this;
      if (flag) {
        followDoctor({
          openId: this.openId,
          doctorId: this.doctorId,
        }).then((res) => {
          console.log(res);
          _this.doctorInfo.isFollow = "Y";
        });
      } else {
        unFollowDoctor({
          openId: this.openId,
          doctorId: this.doctorId,
        }).then((res) => {
          console.log(res);
          _this.doctorInfo.isFollow = "N";
        });
      }
    },
    close() {
      this.show = false;
    },
    init(index) {
      // 医生排班信息
      let _this = this;
      scheduleDoctorInfo({
        params: {
          doctorId: this.doctorId,
          dayNum: 14,
          scheduleType: index,
        },
      }).then((scheduleList) => {
        _this.MAAList = scheduleList.map((item) => {
          let week = new Date(item.appointDate).getDay();
          let weekStr = "";
          switch (week) {
            case 0:
              weekStr = "星期日";
              break;
            case 1:
              weekStr = "星期一";
              break;
            case 2:
              weekStr = "星期二";
              break;
            case 3:
              weekStr = "星期三";
              break;
            case 4:
              weekStr = "星期四";
              break;
            case 5:
              weekStr = "星期五";
              break;
            case 6:
              weekStr = "星期六";
              break;
          }
          let mtime = item.appointDate.substring(5);
          if (item.appointScheduleVOList) {
            return {
              id: mtime,
              week: weekStr,
              date: mtime,
              antemeridian: {
                all: item.appointScheduleVOList[0]?.allNumber,
                s: item.appointScheduleVOList[0]?.appointNumber,
                data: item.appointScheduleVOList[0],
              },
              afternoon: {
                all: item.appointScheduleVOList[1]?.allNumber,
                s: item.appointScheduleVOList[1]?.appointNumber,
                data: item.appointScheduleVOList[1],
              },
            };
          } else {
            return {
              id: mtime,
              week: weekStr,
              date: mtime,
              antemeridian: {
                all: 0,
                s: 0,
                data: 0,
              },
              afternoon: {
                all: 0,
                s: 0,
                data: 0,
              },
            };
          }
        });
        _this.listArr = [];
        let i = _this.MAAList.length / 7;
        for (let s = 0; s < i; s++) {
          console.log(s);
          let arr = _this.MAAList.slice(s * 7, (s + 1) * 7);
          console.log(_this.MAAList);
          _this.listArr.push(arr);
        }
      });
    },
    tabClick(e) {
      if (e.index === 0) {
        this.init(1);
      } else {
        this.init(2);
      }
    },
    open() {
      this.show = true;
    },
    dateClick(data, show) {
      if (!show) {
        return false;
      }
      let _this = this;
      this.appointSchedule = data.data;
      this.show = true;
      this.current = 0;
      appointScheduleList({
        params: {
          scheduleRecordId: data.data.scheduleRecordId,
          classesType: data.data.classesType,
        },
      }).then((res) => {
        console.log(res);
        _this.timeList = res.records;
      });
    },
    tabsClick(data) {
      console.log(data);
      this.current = data.index;
    },
  },
};
</script>
<style lang='scss'>
@import "index.scss";
</style>